<template>
<!-- 这是申请售后进度的页面 -->
<!-- 烧鸭，腐竹 -->
  <div id="progress">
    <div class="frame">
      <h3>{{$t("ASProgress.consultWith")}}</h3>
      <div class="refund_Apply">
        <!-- 微信退款，要商品1元起，才能退款，低于1元不能用企业微信退款 -->
        <!-- 退款 -->
        <ul v-if="orderData.rtype === 0">
          <li>{{$t("ASProgress.consultWith")}}：</li>
          <li>1、{{$t("ASProgress.RefundProcess1")}}</li>
          <li>2、{{$t("ASProgress.RefundProcess2")}}</li>
        </ul>
        <!-- 退货退款 -->
        <ul v-if="orderData.rtype == 1">
          <li>{{$t("ASProgress.returnGoods")}}：</li>
          <li>1、{{$t("ASProgress.returnGoods1")}}</li>
          <li>2、{{$t("ASProgress.returnGoods2")}}</li>
          <li>3、{{$t("ASProgress.returnGoods3")}}</li>
          <li>4、{{$t("ASProgress.returnGoods4")}}</li>
        </ul>
        <!-- 换货 -->
        <ul v-if="orderData.rtype == 2">
          <li>{{$t("ASProgress.exchange")}}：</li>
          <li>1、{{$t("ASProgress.exchangeGoods1")}}</li>
          <li>2、{{$t("ASProgress.exchangeGoods2")}}</li>
          <li>3、{{$t("ASProgress.exchangeGoods3")}}</li>
          <li>4、{{$t("ASProgress.exchangeGoods4")}}</li>
        </ul>
      </div>
      <div class="consult">
        <!-- 退货 -->
        <div class="returnGoods" v-if="((orderData.rtype == 1 || orderData.rtype == 2)  && (orderData.refund_status == 3 || orderData.refund_status == 4 || orderData.refund_status == 5))">
          <div v-if="orderData.refundaddress !== null">
            <p><i class="el-icon-location-outline"></i>{{$t("ASProgress.returnAddress")}}</p>
            <div class="returnText">
                {{orderData.refundaddress.province}} {{orderData.refundaddress.city}} {{orderData.refundaddress.area}} {{orderData.refundaddress.address}} <br/>
                {{orderData.refundaddress.name}} {{orderData.refundaddress.mobile}} {{orderData.refundaddress.tel}}
            </div>
          </div>
          <div v-show="(orderData.message != null && orderData.message != '')">
            <p><i class="el-icon-chat-line-round"></i>{{$t("ASProgress.remarks")}}</p>
            <div class="LAMessage">{{orderData.message}}</div>
          </div>
          <div class="returnStatus">{{orderData.rtype | perhaps(1, returnI18n)}}：
            <!-- 需填写快递单号，那么用户退货的快递单号orderData.user_refund_expresssn要为空，要在通过申请(需客户寄回商品)的申请状态下orderData.refund_status == 3 -->
            <span class="handShape" @click="FillInExpress" v-show="((orderData.refund_status == 3 || orderData.refund_status == 4) && (orderData.user_refund_expresssn == ''))">{{$t("ASProgress.fillIn")}}<i class="el-icon-arrow-right"></i></span>
            <!-- 等待商家确认，要在通过申请(需客户寄回商品)的申请状态下orderData.refund_status == 3， 用户退货快递单号user_refund_expresssn不为空，就是已填写，并且商家退货的快递单号为空的情况下 -->
            <span v-show="((orderData.refund_status == 3 || orderData.refund_status == 4) && (orderData.user_refund_expresssn != '') && (orderData.brand_refund_rexpresssn == ''))">{{$t("ASProgress.confirm")}}</span>
            <!-- 商家已经发货，要在通过申请(需客户寄回商品)的申请状态下orderData.refund_status == 3，并且商家退货的快递单号不为空的情况下 -->
            <span v-show="((orderData.refund_status == 3 || orderData.refund_status == 5) && (orderData.brand_refund_rexpresssn != ''))">{{$t("ASProgress.deliver")}}</span></div>
            <!-- 同上商家已发货，才显示商家换货再次发货的快递 -->
          <div class="r_deliverGoods" v-show="((orderData.refund_status == 3 || orderData.refund_status == 4 || orderData.refund_status == 5) && (orderData.brand_refund_rexpresssn != ''))">
            <div class="r_afterSale">{{orderData.rtype | perhaps(2, returnI18n)}}：<span>{{orderData.brand_refund_rexpresscom}}</span></div>
            <div class="r_afterSale">{{orderData.rtype | perhaps(3, returnI18n)}}：<span>{{orderData.brand_refund_rexpresssn}}</span></div>
          </div>
          <!-- 填写寄回给卖家，退换货的快递单号 -->
          <!-- :title="填写快递单号 $t("ASProgress.fillIn")" -->
          <el-dialog
            :title="$t('ASProgress.fillIn')"
            :visible.sync="expressVisible"
            width="400px"
            @close="expressClose"
            @opened="expressOpened"
            :before-close="handleClose">
            <div class="selectHandle additional">
              <div class="selectText">{{$t("orderDetails.courierCompany")}}</div>
              <select class="select">
                <option>其它快递</option>
                <option>顺丰</option>
                <option>申通</option>
                <option>韵达快运</option>
                <option>天天快递</option>
                <option>圆通速递</option>
                <option>中通速递</option>
                <option>EMS快递</option>
                <option>汇通快运</option>
                <option>全峰快递</option>
                <option>宅急送</option>
                <option>aae全球专递</option>
                <option>安捷快递</option>
                <option>安信达快递</option>
                <option>彪记快递</option>
                <option>bht</option>
                <option>百福东方国际物流</option>
                <option>中国东方（COE）</option>
                <option>长宇物流</option>
                <option>大田物流</option>
                <option>德邦物流</option>
                <option>dhl</option>
                <option>dpex</option>
                <option>d速快递</option>
                <option>递四方</option>
                <option>fedex（国外）</option>
                <option>飞康达物流</option>
                <option>凤凰快递</option>
                <option>飞快达</option>
                <option>国通快递</option>
                <option>港中能达物流</option>
                <option>广东邮政物流</option>
                <option>共速达</option>
                <option>恒路物流</option>
                <option>华夏龙物流</option>
                <option>海红</option>
                <option>海外环球</option>
                <option>佳怡物流</option>
                <option>京广速递</option>
                <option>急先达</option>
                <option>佳吉物流</option>
                <option>加运美物流</option>
                <option>金大物流</option>
                <option>嘉里大通</option>
                <option>晋越快递</option>
                <option>快捷速递</option>
                <option>联邦快递（国内）</option>
                <option>联昊通物流</option>
                <option>龙邦物流</option>
                <option>立即送</option>
                <option>乐捷递</option>
                <option>民航快递</option>
                <option>美国快递</option>
                <option>门对门</option>
                <option>OCS</option>
                <option>配思货运</option>
                <option>全景快递</option>
                <option>全际通物流</option>
                <option>全日通物流</option>
                <option>全一物流</option>
                <option>如风达</option>
                <option>三态速递</option>
                <option>盛辉物流</option>
                <option>速尔物流</option>
                <option>盛丰物流</option>
                <option>赛澳递</option>
                <option>天地华宇</option>
                <option>tnt</option>
                <option>ups</option>
                <option>万家物流</option>
                <option>文捷航空物流</option>
                <option>伍圆</option>
                <option>万象物流</option>
                <option>新邦物流</option>
                <option>信丰物流</option>
                <option>亚风速递</option>
                <option>一邦速递</option>
                <option>优速物流</option>
                <option>邮政包裹挂号信</option>
                <option>邮政国际包裹挂号信</option>
                <option>远成物流</option>
                <option>源伟丰快递</option>
                <option>元智捷诚快递</option>
                <option>运通快递</option>
                <option>越丰物流</option>
                <option>源安达</option>
                <option>银捷速递</option>
                <option>中铁快运</option>
                <option>中邮物流</option>
                <option>忠信达</option>
                <option>芝麻开门</option>
                <option>安能物流</option>
              </select>
              <i class="el-icon-arrow-down"></i>
            </div>
            <div class="selectHandle">
              <div class="selectText">{{$t("orderDetails.courierNumber")}}</div>
              <input class="select" v-model="courierNumber" style="border: 1px solid #ccc;" maxlength="20" onkeyup="value=value.replace(/[^\w]/ig,'')">
              <!-- <i class="el-icon-arrow-down"></i> -->
            </div>
            <!-- 提示 -->
            <div class="promptText">{{promptText}}</div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="expressVisible = false">{{$t("Shopping.no")}}</el-button>
              <el-button type="primary" @click="express">{{$t("Shopping.yes")}}</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="consult_title">{{$t("ASProgress.consult")}}</div>
        <ul>
          <li><span>{{$t("ASProgress.mode")}}：</span><p>{{orderData.rtype | statusV}}</p></li>
          <li><span>{{orderData.rtype | perhaps(4, returnI18n)}}：</span><p>{{orderData.reason}}</p></li>
          <li><span>{{orderData.rtype | perhaps(5, returnI18n)}}：</span><p>{{orderData.content}}</p></li>
          <li v-if="orderData.rtype != 2"><span>{{$t("ASProgress.money")}}：</span><p>￥{{orderData.applyprice}}</p></li>
          <li><span>{{$t("ASProgress.time")}}：</span><p>{{orderData.createtime}}</p></li>
        </ul>
      </div>
      <div class="button">
        <button @click="confirmReceipt" v-if="(orderData.rtype == 1 || orderData.rtype == 2)  && (orderData.refund_status == 3 || orderData.refund_status == 4 || orderData.refund_status == 5) && (orderData.brand_refund_rexpresssn != '')" :disabled='disabled'>{{$t("ASProgress.confirmReceipt")}}</button>
        <!-- <button @click="MCourierNumber" :disabled='disabled'>查看换货物流</button> -->
        <button @click="MCourierNumber" v-if="(orderData.rtype == 1 || orderData.rtype == 2)  && (orderData.refund_status == 3 || orderData.refund_status == 4) && (orderData.user_refund_expresssn != '') && (orderData.brand_refund_rexpresssn == '')" :disabled='disabled'>{{$t("ASProgress.modify")}}</button>
        <button @click="fillIn" v-if="(orderData.rtype == 1 || orderData.rtype == 2)  && (orderData.refund_status == 3 || orderData.refund_status == 4) && (orderData.user_refund_expresssn == '') && (orderData.brand_refund_rexpresssn == '')" :disabled='disabled'>{{$t("ASProgress.fillIn")}}</button>
        <button @click="modify(orderData.order_status)" v-if="(orderData.rtype == 0 || orderData.rtype == 1 || orderData.rtype == 2)  && (orderData.refund_status == 0)" :disabled='disabled'>{{$t("ASProgress.amendApplication")}}</button>
        <button @click="cancel" v-if="(orderData.rtype == 0 || orderData.rtype == 1 || orderData.rtype == 2) && (orderData.refund_status == 0 || orderData.refund_status == 1 || orderData.refund_status == 3 || orderData.refund_status == 4) && (orderData.brand_refund_rexpresssn == '')" :disabled="disabled">{{$t("ASProgress.cancel")}}</button>
      </div>
    </div>
    <!-- 申请退款，弹框，待发货 -->
    <el-dialog
      v-if="((orderData.order_status == 1 || orderData.order_status == 2 || orderData.order_status == 3) ? true : false)"
      title="修改申请"
      :visible.sync="dialogVisible"
      width="25%"
      @close="closeODetails"
      @opened="dialogOpened"
      :before-close="handleClose">
      <table class="table_refund">
        <tr>
          <td>处理方式</td>
          <td>
            <div class="selectHandle">
              <select class="choice" v-html="label" @change="huanhuo"></select>
              <i class="el-icon-arrow-down"></i>
            </div>
          </td>
        </tr>
        <tr>
          <td>{{moneyText}}原因</td>
          <td>
            <div class="selectHandle">
              <select class="choice">
                <option>不想要了</option>
                <option >卖家缺货</option>
                <option>拍错了/订单信息错误</option>
                <option>其它</option>
              </select>
              <i class="el-icon-arrow-down"></i>
            </div>
          </td>
        </tr>
        <tr>
          <td>{{moneyText}}说明</td>
          <td><input v-model="reasonRefund" type="text" :placeholder="$t('orderDetails.optional')" maxlength=50></td>
        </tr>
        <tr v-show="moneyBool">
          <td>{{$t("ASProgress.money")}}</td>
          <td>￥<el-input-number v-model="refundAmount" :controls="false" :min="0" :max="Number(orderData.orderprice)"></el-input-number></td>
        </tr>
        <tr>
          <td>{{$t("orderDetails.upload")}}</td>
          <td>
            <!-- <div class="upImg">
              <span v-for="(imgList, index) in orderData.imgs" :key="index">
                <img :src="url + imgList" alt="" srcset="">
              </span>
            </div> -->
            <!-- (response, file, fileList) => {handleRemove(fileList)} -->
            <div class="uploadPictures">
              <el-upload
                action="https://api.shop.uekea.com/"
                list-type="picture-card"
                :limit="imgNum"
                ref="upload"
                :file-list="[]"
                :before-upload="beforeUpload"
                :on-success="(response, file, fileList) => {uploadSuccess(fileList)}"
                :on-error="(err, file, fileList) => {uploadError()}"
                :on-remove="(file, fileList) => {handleRemove(fileList)}">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </td>
        </tr>
      </table>
      <p class="tips" v-show="moneyBool">*{{$t("orderDetails.tips")}}￥{{orderData.orderprice}}</p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t("Shopping.no")}}</el-button>
        <el-button type="primary" @click="confirmClosing">{{$t("Shopping.yes")}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderData: {
        ordersn: "",          // 订单号
        order_status: "",     // 订单状态
        refund_status: "",    // 申请状态
        rtype: "",            // 处理方式
        reason: "",           // 退款原因
        content: "",          // 退款说明
        applyprice: "",       // 退款金额
        orderprice: "",       // 订单总价格
        createtime: "",       // 申请时间
        message: "",          // 卖家留言
        user_refund_expresssn: "",          // 用户退换货，快递单号
        brand_refund_rexpresssn: "",        // 卖家换货，再次发货快递单号
      },      // 查看进度信息
      imgNum: 5,        // 上传图片的数量
      // url: "https://mp.uekea.cn/attachment/",      // 上传图片显示拼接的路径

      orderNum: "",     // 订单号
      dialogVisible: false,   // 修改申请弹框
      label: null,    // html标签
      reasonRefund: "",   // 退款说明，待发货
      refundAmount: "",   // 退款金额，待发货
      uploadImg: [],      // 上传的图片
      disabled: false,    // 修改按钮是否禁用
      moneyBool: true,     // 换货的时候隐藏金额，还替换文字
      moneyText: "退款",        // 退货和换货，文字替换
      changeText: "退款",       //  
      expressVisible: false,    // 退换货，填写寄回的快递单号，弹框是否打开
      distinguish: "",      // 识别，是填写快递单号，还是修改快递单号
      promptText: "",     // 快递单号没输入，提示文字
      courierCompany: "其它快递",     // 下拉框，默认快递公司
      courierNumber: "",      // 快递单号
      testNum: null,      // 退货退款、换货，同意，第二阶段。-2 取消，-1 拒绝，0 没有，1 待商家确认，2 同意，3 第三阶段，商家再次发货
    }
  },
  methods: {
    // 退换货，需要填写的快递单号
    FillInExpress() {
      this.distinguish = "fillIn";
      this.expressVisible = true;
    },
    // 填写快递单号，弹框的关闭回调
    expressClose() {
      let id = document.getElementsByClassName("select");
      id[1].value = "";
      id[0][0].selected = true;
      this.promptText = "";
    },
    // 填写退换货，快递单号按钮
    fillIn() {
      this.distinguish = "fillIn";
      this.expressVisible = true;
    },
    // 填写退换货快递单号，确认按钮
    express(){
      var _this = this;
      let id = document.getElementsByClassName("select");
      // 快递公司和快递单号不能为空
      if(id[1].value != "") {
        _this.$post("refund/express",{
          orderid: _this.$route.query.orderid,
          expresscom: id[0].value,
          expresssn: id[1].value,
        }).then((res)=>{
          if(res.code == 201) {
            _this.courierCompany = id[0].value;     // 赋值给快递公司
            _this.orderData.user_refund_expresscom = id[0].value;    // 用户寄出-退货快递公司
            _this.orderData.user_refund_expresssn = id[1].value;     // 用户寄出-退货快递单号
            _this.courierNumber = id[1].value;    // 弹框的快递单号
            _this.expressVisible = false;
          }
        })
        
      } else {
        this.promptText = this.$t("ASProgress.fillIn2");
        // this.promptText = "请填写快递单号！";
        
      }
    },

    // 修改快递订单号
    MCourierNumber() {
      this.expressVisible = true;
      this.distinguish = "confirm";
    },
    // 确认收到换货物品
    confirmReceipt() {
      var _this = this;
      _this.$confirm(this.$t("ASProgress.confirm2"), this.$t("Shopping.Tips"), {
        confirmButtonText: this.$t("Shopping.yes"),
        cancelButtonText: this.$t("Shopping.no"),
      }).then(() => {
        _this.$put("user/order/confirm",{
          openid: _this.$Cookie.getCookie("userID"),
          order_id: _this.orderData.orderid,
        }).then(res=>{
          if(res.code == 204) {
            _this.$router.push({"path": "/accountInformation/orderDetails", query: {orderid: _this.orderData.orderid}});
          }
        })
      })
    },
    // 填写，修改快递单号弹框，打开动画结束时的回调
    expressOpened() {
      let id = document.getElementsByClassName("select");
      if(this.distinguish == "confirm") {
        id[0].value = this.courierCompany;
        this.courierNumber = this.orderData.user_refund_expresssn;
      }
    },
    // 给小于10的时间，前面添加0
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? "0" + param : param;
    },
    // 处理方式，下拉框change事件，选择换货的时候，隐藏金额输入框
    huanhuo() {
      let id = document.getElementsByClassName("choice");
      if(id[0].value == "换货") {
        this.moneyBool = false;
        this.moneyText = "换货";
      } else {
        this.moneyText = "退款";
        this.moneyBool = true;
      }
    },
    // 订单弹框，关闭回调
    closeODetails() {
      var _this = this;
      _this.dialogVisible = false;   // 关闭取消订单原因弹框
      _this.disabled = true;  // 取消订单,按钮禁用
      _this.reasonRefund = "";    // 申请退款说明，待发货
      setTimeout(function(){
        _this.disabled = false;  // 取消订单，按钮解除禁用
      }, 1000)
      
      if(_this.uploadImg.length > 0) {
        _this.$refs.upload.clearFiles();    // 清除上传图片
      }
    },
    // 取消订单弹框X关闭图标，关闭弹框
    handleClose(done) {
      done();   // x关闭图标，关闭弹框
    },
    // 修改申请按钮
    modify(data) {
      // data 订单状态 1 待发货，2 待收货，3 交易完成
      this.dialogVisible = true;    // 打开弹框
      // 待发货，只有退款，带收货和交易完成，全部可以选
      if(data == 1) {
        this.label = `<option selse>退款（仅退款不退货）</option>`;
      } else if(data == 2 || data == 3) {
        this.label = `<option>退款（仅退款不退货）</option>
                      <option>退款退货</option>
                      <option>换货</option>`;
      }
      // 判断申请类型，0 退款，1 退款退货，2换货
      if(this.orderData.rtype == 2) {
        this.moneyBool = false;
        this.moneyText = "换货";
      } else {
        this.moneyText = "退款";
        this.moneyBool = true;
      }
      
    },
    // 修改申请弹框，结束回调
    dialogOpened() {
      let id = "";
      id = document.getElementsByClassName("choice");
      id[1].value = this.orderData.reason;
      this.reasonRefund = this.orderData.content;
      this.refundAmount = this.orderData.applyprice;
      id[0][this.orderData.rtype].selected = true;
    },
    // 确认修改申请按钮
    confirmClosing() {
      var _this = this;
      // 0退款，1退货退款，2换货
      let id = document.getElementsByClassName("choice");
      let form = new FormData();
      // 判断上传图片的数组长度，是否大于0
      if(_this.uploadImg.length > 0) {
        for (let i = 0; i < _this.uploadImg.length; i++) {
          form.append("imgs[]", _this.uploadImg[i].raw);        // 上传图片
        }
      } else {
        // 没有上传图片，赋值空
        form.append("imgs[]", "");
      }
      form.append("refundno", _this.orderData.refundno);
      form.append("orderid", _this.orderData.orderid);
      form.append("rtype", id[0].selectedIndex);
      form.append("reason", id[1].value);
      form.append("content", _this.reasonRefund);
      form.append("apply_price", _this.refundAmount);
      form.append("order_price", _this.orderData.orderprice);
      // 修改退款申请
      _this.$post("order/refund/update", form
      ).then((res)=>{
        if(res.code == 201) {
          _this.dialogVisible = false;    // 关闭弹框
          _this.$router.push({"path": "/accountInformation/orderDetails", query:{"orderid": _this.orderData.orderid}});
        }
      })

    },
    // 取消申请按钮
    cancel() {
      var _this = this;
      _this.$confirm(this.$t("orderDetails.withdraw2"), this.$t("Shopping.Tips"), {
        confirmButtonText: this.$t("Shopping.yes"),
        cancelButtonText: this.$t("Shopping.no"),
        // type: "warning"
      }).then(() => {
        _this.$put(`refund/cancel/${_this.orderData.orderid}`
        ).then((res)=>{
          if(res.code == 201) {
            _this.orderData.refund_status = -2;
            _this.$router.push({"path": "/accountInformation/orderDetails", query: {orderid: _this.orderData.orderid}});
          }
        })
      })
    },
    // 上传图片前
    beforeUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;     // 限制上传图片大小10M
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      let bool = false;
      if(!isLt10M) {
        this.$MessageAlert(true, this.$t("orderDetails.Upload1"), "error");
      }
      if (!isJPG && !isPNG && !isJPEG) {
        this.$MessageAlert(true, this.$t("orderDetails.Upload2"), "error");
        bool = false;
      } else {
        bool = true;
      }
      return bool && isLt10M;
    },
    // 上传成功
    uploadSuccess(fileList) {
      this.uploadImg = fileList;
    },
    // 上传失败
    uploadError() {
      this.$MessageAlert(true, "上传失败，请重新上传", "error");
    },
    // 上传图片，删除上传的图片
    handleRemove() {
      console.log("");
    },
    // 退换货
    returnI18n(value, index) {
      let text = "";
      // 2是换货，1是退款
      if(value == 2) {
        // text = "换货";
        switch (index) {
          case 1:
            text = this.$t("ASProgress.sexchange1");
            // text = "换货状态";
            break;
          case 2:
            text = this.$t("ASProgress.sexchange2");
            // text = "换货快递公司";
            break;
          case 3:
            text = this.$t("ASProgress.sexchange3");
            // text = "换货快递单号";
            break;
          case 4:
            text = this.$t("ASProgress.reason2");
            // text = "换货原因";
            break;
          case 5:
            text = this.$t("ASProgress.explain2");
            // text = "换货说明";
            break;
          default:
            break;
        }
      } else {
        // text = "退款状态";
        switch (index) {
          case 1:
            text = this.$t("ASProgress.refund1");
            // text = "退款";
            break;
          case 2:
            text = this.$t("ASProgress.refund2");
            // text = "退款快递公司";
            break;
          case 3:
            text = this.$t("ASProgress.refund3");
            // text = "退款快递单号";
            break;
          case 4:
            text = this.$t("ASProgress.reason1");
            // text = "退款原因";
            break;
          case 5:
            text = this.$t("ASProgress.explain1");
            // text = "退款说明";
            break;
          default:
            break;
        }
      }
      return text;
    }
  },
  filters: {
    statusV(value) {
      let data = "";
      switch (value) {
        case 0:
          data = "退款";
          break;
        case 1:
          data = "退款退货";
          break;
        case 2:
          data = "换货";
          break;
        default:
          break;
      }
      return data;
    },
    perhaps(value, index, returnI18n) {
      // let text = "";
      // if(value == 2) {
        // text = "换货";
      // } else {
        // text = "退款";
      // }
      // return text;
      return returnI18n(value, index)
    }
  },
  created () {
    // 0退款，1退款退货，2换货
    var _this = this;
    //  查看申请进度
    _this.$get(`order/refund/${_this.$route.query.orderid}`
    ).then((res)=>{
      if(res.code == 200) {
        // 判断订单不是交易关闭状态，申请状态为 申请中或者通过申请的，不然就没有进度查看，返回订单详情页面
        if(res.data.order_status != -1 && (res.data.refund_status == 0 || res.data.refund_status == 1 || res.data.refund_status == 3 || res.data.refund_status == 4 || res.data.refund_status == 5)) {
          // _this.orderNum = res.data.ordersn;
          let time = new Date(res.data.createtime * 1000);
          res.data.createtime = time.getFullYear() + "-" + this.timeFormat(time.getMonth()+1) + "-" + this.timeFormat(time.getDate())  + " " + this.timeFormat(time.getHours()) + ":" + this.timeFormat(time.getMinutes());
          _this.orderData = res.data;

          if(res.data.user_refund_expresscom == "") {
            _this.courierCompany = "其它快递";
          } else {
            _this.courierCompany = res.data.user_refund_expresscom;    // 用户退货，寄出的快递公司
          }
          _this.courierNumber = res.data.user_refund_expresssn;    // 用户退货，寄出的快递单号

        } else {
          _this.$router.push({"path": "/accountInformation/orderDetails", query: {orderid: _this.$route.query.orderid}})
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
.frame {
  h3 {
    color: #333;
    text-transform: none;
    padding: 10px 5px 20px 0px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .button {
    padding-top: 50px;
    text-align: right;
    button {
      background-color: white;
      font-size: 14px;
      color: #888;
      border: 1px solid #ccc;
      padding: 4px 25px;
      margin-left: 15px;
    }
    button:hover {
      background-color: #777;
      border-color: #777;
      color: white;
    }
  }
}
.consult {
  .returnGoods {
    p {
      font-size: 16px;
      margin: 0px;
      padding: 8px 0px;
      border-bottom: 1px solid #cecece;
      i {
        margin-right: 8px;
      }
    }
    .returnText {
      padding-top: 15px;
      padding-bottom: 20px;
      font-size: 16px;
    }
    .LAMessage {
      color: #FF5555;
      padding-top: 15px;
      padding-bottom: 30px;
      font-size: 16px;
    }
    .returnStatus {
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ccc;
      font-size: 16px;
      .handShape {
        cursor: pointer;
      }
      span {
        // float: right;
        padding: 0px 26px;
        .el-icon-arrow-right {
          margin-left: 7px;
        }
      }
    }
  }
  .consult_title {
    font-size: 15px;
    padding: 15px 0px;
    margin-top: 10px;
  }
  ul {
    li {
      font-size: 16px;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #dedede;
      span {
        padding-right: 10px;
      }
      p {
        color: #777;
        padding-left: 20px;
        font-size: 16px;
        margin: 0px;
        display: inline-block;
      }
    }
  }
}
/deep/ .el-dialog {
  min-width: 350px!important;
}

/deep/ .el-radio {
  display: block;
  margin: 10px 0px;
}
.table_refund {
  margin: auto;
  tr {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    td:first-child {
      width: 80px;
      min-width: 80px;
    }
    td:last-child {
      width: 80%;
      input {
        width: calc(100% - 16px);
      }
    }
  }
  tr:nth-child(3) {
    td:last-child {
      input {
        width: 100%;
      }
    }
  }
  tr:last-child {
    line-height: 0px;
  }
}
.tips {
  width: 400px;
  margin: auto;
  margin-top: 5px;
  font-size: 13px;
  color: red;
}
.additional {
  margin-bottom: 12px;
}
.selectHandle {
  position: relative;
  width: 100%;
  .selectText {
    display: inline-block;
    padding-right: 20px;
    height: 35px;
    line-height: 35px;
  }
  .select {
    width: calc(100% - 130px);
    position: absolute;
    top: 0px;
    right: 0px;
    // width: auto;
    height: 35px;
  }
  .choice {
    width: 100%;
    height: 40px;
  }
  .el-icon-arrow-down {
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 12%;
    text-align: center;
    background-color: white;
  }
}

/deep/ .el-upload__input {
  display: none;
}
/deep/ .el-upload--picture-card {
  width: 80px;
  height:80px;
  line-height:80px;
  border-radius: 0px;
}
/deep/ .el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  // line-height:80px !important;
  border-radius: 0px !important;
  // margin: 0px 8px 0px 0px !important;
}

// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   width: 100px;
//   height: 100px;
//   line-height: 100px;
//   text-align: center;
//   border: 1px dashed #ccc;
// }
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
/deep/ .el-input-number {
  width: calc(100% - 16px);
}
/deep/ .el-input__inner {
  border: none;
  text-align: left !important;
  padding: 0px 5px !important;
}
.refund_Apply {
  color: #8c8c8c;
  ul {
    li {
      padding: 3px 0px;
    }
  }
}
.r_deliverGoods {
  font-size: 16px;
  
  // border-bottom: 1px solid #ccc;
  .r_afterSale {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    // padding-right: 25px;
    span {
      margin-left: 26px;
    }
  }

}
.promptText {
  font-size: 14px;
  height: 21px;
  color: #F70000;
  text-indent: 135px;
  margin-top: 5px;
}
// 上传凭证
.uploadPictures {
  display: inline-block;
  padding: 10px 0px 10px 0px;
}
// /deep/ .el-upload-list__item {
//   margin-bottom: 0px !important;
// }
// .upImg {
//   margin: 10px 10px 18px 0px;
//   display: inline-block;
//   vertical-align: bottom;
//   border: 1px solid #ccc;
  
//   span {
//     display: inline-block;
//     width: 80px;
//     height: 80px;
//     img {
//       width: 100%;
//       height: 100%;
//     }
//   }
  
// }
// 测试数据
// .test {
//   button {
//     padding: 3px 10px;
//     border: 1px solid red;
//     margin: 4px 10px;
//   }
// }
</style>